$(function(){
    // rate = getRate();
    // console.log(getRate());
    var currHeader = new Vue({
        el:'#currency-nav',
        data:{
            items:[],
        },
        methods:{
            //显示指定的概念详情
            showMessage: function(event){
                var conceptId = event.currentTarget.getAttribute('value');
                $('#currency-nav').find('.currency-item').addClass('currency-item-active  currency-item-changed');
                $('#currency-nav').find('.currency-num').addClass('currency-num-changed');
                $(event.currentTarget).removeClass('currency-item-active');

                //具体风口概念的样式
                $('#currency-header').find('li').removeClass('active');
                $('#currency-header').find('li[value=0]').addClass('active');
                $('.tab-pane').removeClass('active');
                $('#market').addClass('active');

                //设置对象的概念ID
                currencyList.market.conceptId =  currencyList.optional.conceptId = conceptId;
                currencyList.market.currPage =  currencyList.optional.currPage = 1;
                currencyList.market.sortType =  currencyList.optional.sortType = 0;
                currencyList.market.sortWord =  currencyList.optional.sortWord = "";
                currencyList.market.keyWord =  currencyList.optional.keyWord = "";

                //点击对应概念时，设置概念风口的信息
                var index = event.currentTarget.getAttribute('index');
                currHeaderInfo.name=this.items[index].name;
                currHeaderInfo.avgChange=this.items[index].avgChange;
                currHeaderInfo.coinCounts=this.items[index].coinCounts;
                currHeaderInfo.upCounts=this.items[index].upCounts;
                currHeaderInfo.downCounts=this.items[index].downCounts;
                currHeaderInfo.upMostCoinInfo=this.items[index].upMostCoinInfo;
                currHeaderInfo.downMostCoinInfo=this.items[index].downMostCoinInfo;
                currHeaderInfo.down=this.items[index].down;
                //查询货币列表 (默认货币列表)
                var data = {
                    conceptId:currencyList.market.conceptId, //概念ID
                    sortType:currencyList.market.sortType,  // 排序类型
                    sortWord:currencyList.market.sortWord, //排序字段
                    pageSize:currencyList.market.pageSize,  //每页显示条目
                    pageNum:currencyList.market.currPage,  //当前页
                    keyword:currencyList.market.keyWord,  //搜索关键字
                    element: currencyList,  //当前对象
                    tabType: 'market', //tab类型  货币列表 或 自选
                };
                getCoins(data);

                //加载指定ID的消息
                $('#currency-info').removeClass('hidden');

            },
            blockSilder: function(sign,event){
                var box = $('#currency-nav .item-box');
                var boxWidth = parseFloat(box.outerWidth());
                var group = $('#currency-nav .item-group');
                var item = $('.currency-item').eq(0);
                var itemWidth = parseFloat(item.outerWidth(true));
                if(sign == 'next'){
                    var left = parseFloat(box.css('left')) - itemWidth * 4;
                    if(Math.abs(left) + group.width() <= boxWidth){
                        $('#currency-nav .item-box').animate({left: left},200);
                    }
                }else{
                    var left = parseFloat(box.css('left')) + itemWidth *4 ;
                    if(left <=0){
                        $('#currency-nav .item-box').animate({left: left},200);
                    }
                }

                //
                $('#currency-info').addClass('hidden');
                $('#currency-nav').find('.currency-item').removeClass('currency-item-active');  //清除背景色
                $('#currency-nav').find('.currency-num').removeClass('currency-num-changed');  //清除字体颜色
                $('#currency-info').addClass('hidden');
            },
            hightShow: function(type,event){
                switch(type){
                    case 0:
                        event.currentTarget.setAttribute('src','image/zuoActive.png');
                        break;
                    case 1:
                        event.currentTarget.setAttribute('src','image/youActive.png');
                        break;
                }

            },
            remHightShow: function(type,event){
                switch(type){
                    case 0:
                        event.currentTarget.setAttribute('src','image/zuo.png');
                        break;
                    case 1:
                        event.currentTarget.setAttribute('src','image/you.png');
                        break;
                }

            },

            showTotal: function(event){
                $('#currency-nav').find('.currency-item').removeClass('currency-item-active');  //清除背景色
                $('#currency-nav').find('.currency-num').removeClass('currency-num-changed');  //清除字体颜色
                $('#currency-info').addClass('hidden');

                //设置对象的概念ID
                currencyList.market.conceptId =  currencyList.optional.conceptId = "";
                currencyList.market.currPage =  currencyList.optional.pageNum = 1;
                currencyList.market.sortType =  currencyList.optional.sortType = 0;
                currencyList.market.sortWord =  currencyList.optional.sortWord = "";
                currencyList.market.keyWord =  currencyList.optional.keyWord = "";
                // //查询货币列表 (默认货币列表)
                // getCoins({conceptId:currencyList.market.conceptId,sortType:currencyList.market.sortType,sortWord:currencyList.market.sortWord, pageSize:currencyList.market.pageSize, pageNum:currencyList.market.pageNum, keyword:currencyList.market.keyWord,element: currencyList.market});
                //查询货币列表 (默认货币列表)
                var data = {
                    conceptId:currencyList.market.conceptId, //概念ID
                    sortType:currencyList.market.sortType,  // 排序类型
                    sortWord:currencyList.market.sortWord, //排序字段
                    pageSize:currencyList.market.pageSize,  //每页显示条目
                    pageNum:currencyList.market.currPage,  //当前页
                    keyword:currencyList.market.keyWord,  //搜索关键字
                    element: currencyList,  //当前对象
                    tabType: 'market', //tab类型  货币列表 或 自选
                };
                getCoins(data);

                // getCoinFocus();
            },
            setSliderWidth :function() {
                var itemWidth = $('#currency-nav .currency-item').eq(0).outerWidth(); //获取每个item宽度
                $('#currency-nav').find('.item-box').eq(0).width(currHeader.items.length * itemWidth + currHeader.items.length);
            }
        },
        mounted:function(){
            this.$nextTick(function(){
                //查询风口概念
                getCoinSummary({element: currHeader,element2: currHeaderInfo,conceptId:getUrlParams().id});

            });
        }
    });
    //隐藏风口概念的详细信息
    var currHeaderInfo = new Vue({
        el:'#currency-info',
        data:{
            coinCounts:0,
            upCounts:0,
            downCounts:"",
            upMostCoinInfo:{},
            downMostCoinInfo:{},
            avgChange:0,
            name:0,
            down:false,
        },
        methods:{},
    });

    var currencyList = new Vue({
        el:'#currency-list',
        data:{
            searchContent:"", //搜索币
            //自选
            optional:{
                totalNum: 1,
                currArea: [], //当前显示的页码LIST，最多9个
                maxPage: 9, //页面显示最大页码数
                currPage: 1, //当前页码
                conceptId: "", //概念ID
                sortType: "", //排序类型
                sortWord:"", //排序字段
                pageSize:10, //页面行数
                // pageNum: 1, //当前页码
                keyWord: "", //关键字
                followId: "", //
                list:[],
            },
            //货币列表
            market:{
                totalNum: 1, //总页码
                currArea: [], //当前显示的页码LIST，最多9个
                maxPage: 9, //页面显示最大页码数
                currPage: 1, //当前页码
                conceptId: "", //概念ID
                sortType: "", //排序类型
                sortWord:"", //排序字段
                pageSize:10, //页面行数
                // pageNum: 1, //当前页码
                keyWord: "", //关键字
                list:[],
            }
        },
        mounted:function(){
            this.$nextTick(function(){
                //设置页面1
                // this.setCurrPage('market'); //默认货币列表
                if(getUrlParams().id){
                    this.market.conceptId = getUrlParams().id;
                }

                currencyList.runCurrencyAPI();
            });
        },
        methods:{
            //获得当前是自选还是货币列表
            getCurrType: function(){
                var type = parseInt($('#currency-header li.active').attr('value'));
                // return type == '0'? 'market': 'optional';
                return type;
            },
            //跳转货币详细页
            goCurrencyProfile: function(event){
                var id = event.currentTarget.parentNode.getAttribute('value');
                var name = ['market','optional'];
                var index =  event.currentTarget.parentNode.getAttribute('index');
                // location.href = 'currencyProfile.html?id='+id;
                var url = event.currentTarget.parentNode.getAttribute("url");
                if (url) {
                    window.open("currencies/" + url);
                } else {
                    window.open( 'currencyProfile.html?id='+id+'&content='+this[name[this.getCurrType()]].list[index].enName);
                }
                // window.open( 'currencyProfile.html?id='+id+'&content='+this[name[this.getCurrType()]].list[index].enName);
            },
            //TAB自选
            myFocus: function(){
                $('.no-data').addClass('hidden');
                $('#currency-list .more').addClass('hidden');
                // this.runCurrencyAPI();
                if(isLogin()){
                    //查询自选
                    var data = {
                        sortType: this.optional.sortType, //	排序类型	否	1	String	0 升序 1 降序
                        sortWord: this.optional.sortWord, //	排序字段	否	20	String	传入对应字段名即可
                        element: this,
                        tabType : 'optional',
                    };
                    getCoinFocus(data);
                }else{
                    //查询 COOKIE自选
                    if($.cookie('followList')){
                        var data = {
                            coinIds: $.cookie('followList') , //cookie自选ID集合
                            element: this,
                            tabType : 'optional',
                        };
                        getFollowLocalCoins(data);
                    }else{
                        //没有数据
                        $('#optional .no-data').removeClass('hidden');
                    }
                }
            },
            //货币列表显示
            showSearch: function(){
                $('.no-data').addClass('hidden');
                $('#currency-list .more').removeClass('hidden');

                //查询货币列表
                var data = {
                    conceptId:this.market.conceptId, //概念ID
                    sortType:this.market.sortType,  // 排序类型
                    sortWord:this.market.sortWord, //排序字段
                    pageSize:this.market.pageSize,  //每页显示条目
                    pageNum:this.market.currPage,  //当前页
                    keyword:this.market.keyWord,  //搜索关键字
                    element: this,  //当前对象
                    tabType: 'market',
                };
                getCoins(data);
            },
            //走势图
            drawFlow: function(id,data,date,min,max){
                // 走势图
                var myFlow = echarts.init(document.getElementById(id));

                var flowOption = {
                    grid: { //内部填充距离
                        left: '2%',
                        right: '2%',
                        top:'2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine:{
                            show:false,
                        },
                        axisTick:{  //刻度线
                            show:false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        min: min,
                        max: max,
                        boundaryGap: false,
                        axisLine:{
                            show:false,
                        },
                        axisTick:{  //刻度线
                            show:false,
                        },
                        axisLabel:{
                            show:false,
                        },
                        splitLine:{
                            show:false,
                        }
                    },
                    visualMap: {
                        show: false,
                        // type: 'piecewise',
                        // seriesIndex:1,//控制series 对应的区域
                        // dimension: 1,
                        // yAxisIndex: 1,
                        pieces:[ {
                            lte: 0,
                            gt:-100,
                            color: "rgba(253, 120, 137, 1)",
                        }],
                        outOfRange: {
                            color: 'rgba(97, 217, 175, 1)',
                        },
                        backgroundColor:"red",
                    },

                    series: [{
                        smooth:true, //折线圆弧度
                        symbol: "none",//去掉折线圆点

                        sampling: 'average', //数据多余像素点时的显示
                        // data: [-1.1,-3.0, 4, 2, 4, -2.2, 1, 1.6, 3.4],
                        data: data,
                        // markLine:{
                        //     silent:false,
                        //     data:[{yAxis:0},]
                        // },
                        // data:[1,40,13,80,50,-60,-30],
                        type: 'line',
                        areaStyle: {
                            color:'rgba(97, 217, 175, 0.3)',
                            origin: 'auto',
                        },
                        // itemStyle : {
                        //     normal : {
                        //         lineStyle:{  //折线样式
                        //             color:'rgba(97, 217, 175, 1)',
                        //             width:2,
                        //         }
                        //     }
                        // }
                    },]
                };


                // 使用刚指定的配置项和数据显示图表。
                myFlow.setOption(flowOption,true);
            },
            //搜索查询
            toSearch: function(event){
                // if(event.currentTarget.type == 'text'){
                //     var str =  event.currentTarget.value; //搜索内容
                // }else{
                //     var str = $(event.currentTarget).prev().val();
                // }
                // alert(str);
                var str = this.market.keyWord;
                if(str =='' || str == null || str == undefined ){
                    $('.filtrate-input').focus();
                }else{
                    //设置对象的概念ID
                    this.market.conceptId =  this.optional.conceptId = "";
                    this.market.currPage =  this.optional.currPage = 1;
                    this.market.sortType =  this.optional.sortType = 0;
                    this.market.sortWord =  this.optional.sortWord = "";
                    this.market.keyWord =  this.optional.keyWord = str.toUpperCase();
                    this.runCurrencyAPI();
                }
            },
            //改变排序
            changeSort: changeSort,
            //根据当前页设置 显示页码行
            setCurrPage: setCurrPage,
            //数字翻页
            toPage: toPage,
            //跳转翻页
            jumpPage: jumpPage ,
            //设置每页行数
            setPageNum: setPageNum,
            //设置自选
            setFavorite:function(name,event){
                var id = event.currentTarget.parentNode.parentNode.getAttribute('value');
                var followId = event.currentTarget.parentNode.parentNode.getAttribute('followid');
                var index = event.currentTarget.parentNode.getAttribute('value');
                var tabType = this.getCurrType() == '0' ? 'market' : 'optional';
                if(isLogin()){
                    if(this[name].list[index].isFavorite){
                        //取消自选
                        removeSelfChange({followId: followId,element:this[tabType],index:index});
                    }else{
                        //添加自选
                        addSelfChange({coinId: id , focusType:0,element:this[tabType],index:index});
                    }
                    // this[name].list[index].isFavorite = !this[name].list[index].isFavorite;
                }else{
                    if(this[name].list[index].isFavorite) {
                        //删除自选
                        var followList = $.cookie('followList').split(',');
                        for(var i=0; i<followList.length; i++){
                            if(followList[i] == id+':0'){
                                followList.splice(i,1);
                                break;
                            }
                        }
                        $.cookie('followList',followList.join(','))
                    }else{
                        //添加自选
                        if ($.cookie('followList')) {
                            var followList = $.cookie('followList').split(',');
                            if($.inArray(id+':0',followList) == -1){
                                $.cookie('followList', $.cookie('followList') + ',' + id+':0');
                            }
                        } else {
                            $.cookie('followList', id+':0');
                        }
                    }
                    this[name].list[index].isFavorite = !this[name].list[index].isFavorite;
                }

            },
            //运行哪个接口程序
            runCurrencyAPI:function(){
                switch(parseInt(this.getCurrType())){
                    case 0 :   //货币列表
                        //查询货币列表
                        var data = {
                            conceptId:this.market.conceptId, //概念ID
                            sortType:this.market.sortType,  // 排序类型
                            sortWord:this.market.sortWord, //排序字段
                            pageSize:this.market.pageSize,  //每页显示条目
                            pageNum:this.market.currPage,  //当前页
                            keyword:this.market.keyWord,  //搜索关键字
                            element: this,  //当前对象
                            tabType: 'market',
                        };
                        getCoins(data);

                        break;
                    case 1:    //自选
                        if(isLogin()){
                            //查询自选
                            var data = {
                                sortType: this.optional.sortType, //	排序类型	否	1	String	0 升序 1 降序
                                sortWord: this.optional.sortWord, //	排序字段	否	20	String	传入对应字段名即可
                                element: this,
                                tabType : 'optional',
                            };
                            getCoinFocus(data);
                        }else{
                            //查询 COOKIE自选
                            if($.cookie('followList')){
                                var data = {
                                    coinIds: $.cookie('followList') , //cookie自选ID集合
                                    element: this,
                                    tabType : 'optional',
                                };
                                getFollowLocalCoins(data);
                            }else{
                                //没有数据
                            }
                        }
                        break;
                    default:
                        alert('严重错误');
                }
            }
        },
    });


    //左右箭头,滑动函数
    // $('.next-btn').on('click',{sign:'next'},blockSilder);
    // $('.prev-btn').on('click',{sign:'prev'},blockSilder);

    //滑动函数，e为传入参数
    // function blockSilder(e){
    //     var box = $('#currency-nav .item-box');
    //     var boxWidth = parseFloat(box.outerWidth());
    //     var group = $('#currency-nav .item-group');
    //     var item = $('.currency-item').eq(0);
    //     var itemWidth = parseFloat(item.outerWidth(true));
    //     if(e.data.sign == 'next'){
    //         var left = parseFloat(box.css('left')) - itemWidth * 4;
    //         if(Math.abs(left) + group.width() <= boxWidth){
    //             $('#currency-nav .item-box').animate({left: left},200);
    //         }
    //     }else{
    //         var left = parseFloat(box.css('left')) + itemWidth *4 ;
    //         if(left <=0){
    //         $('#currency-nav .item-box').animate({left: left},200);
    //         }
    //     }
    //
    //     //
    //     $('#currency-info').addClass('hidden');
    //     $('#currency-nav').find('.currency-item').removeClass('currency-item-active');  //清除背景色
    //     $('#currency-nav').find('.currency-num').removeClass('currency-num-changed');  //清除字体颜色
    //     $('#currency-info').addClass('hidden');
    // }

});